let echarts = require('echarts/lib/echarts')
let elementResizeDetectorMaker = require("element-resize-detector")

export default {
  lineEchart: function (id, data) {
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      grid: {
        left: "5%",
        bottom: "4%",
        top: "5%",
        width: "89%"
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "#ffffff"
          }
        },
        data: data.xData
      },
      yAxis: {
        type: 'value',
        name: "单位：次数",
        splitLine: {
          lineStyle: {
            color: "rgba(26,139,170,0.29)"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#ffffff"
          }
        },
      },
      series: [
        {
          type: 'line',
          data: data.seriesData,
          lineStyle: {
            color: '#FED52F' // 设置线的颜色为红色
          },
          itemStyle: {
            color: '#FED52F', // 数据点颜色
          },
        },
      ]
    };

    let chartDom = echarts.getInstanceByDom(document.getElementById(id))
    if (chartDom == undefined) {
      chartDom = echarts.init(document.getElementById(id));
    }

    chartDom.setOption(option)

    window.addEventListener('resize', () => {
      chartDom.resize()
    })
    let erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById(id), function (element) {
      chartDom.resize()
    })
    return chartDom
  },
  barEchart: function (id, data) {
    let option = {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['1号楼', '2号楼', '3号楼'],
        right: '5%',
        textStyle: {
          color: "#ffffff"
        },
      },
      grid: {
        left: "6%",
        bottom: "5%",
        top: "10%",
        width: "90%"
      },
      xAxis: [
        {
          type: 'category',
          data: data.xData,
          axisLine: {
            lineStyle: {
              color: "#ffffff"
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: "单位：kW·h",
          splitLine: {
            lineStyle: {
              color: "rgba(26,139,170,0.29)"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff"
            }
          },
        }
      ],
      series: [
        {
          type: 'bar',
          name: '1号楼',
          data: data.seriesData1,
          itemStyle: {
            color: '#2391FF'
          }
        },
        {
          type: 'bar',
          name: '2号楼',
          data: data.seriesData2,
          itemStyle: {
            color: '#FFC328'
          }
        },
        {
          type: 'bar',
          name: '3号楼',
          data: data.seriesData3,
          itemStyle: {
            color: '#56A386'
          }
        },
      ]
    };

    let chartDom = echarts.getInstanceByDom(document.getElementById(id))
    if (chartDom == undefined) {
      chartDom = echarts.init(document.getElementById(id));
    }

    chartDom.setOption(option)

    window.addEventListener('resize', () => {
      chartDom.resize()
    })
    let erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById(id), function (element) {
      chartDom.resize()
    })
    return chartDom
  },
}
